<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
	<style>
		/*全部*/
		body li{list-style-type:none;}
		/*头部*/
		header{height:50px;background:#ABCDEF;} 
		/*内容*/
		div{height:1000px;margin:10px 0 10px 0;}
		section{height:1000px;background:#ff8000;}
		section canvas{margin:20px 0 0 5%;background:#c0c0c0;}
		/*尾部*/
		footer{height:100px;background:#8000ff;clear:both;}
	</style>
</head>
<body>
	<header>
		<p>这是HEADER标签</p>
	</header>
	<div>
		<section>
			<canvas width='1200' height="950" id="canvas_id">
				请使用兼容更好的浏览器。
			</canvas>
			<script>
				var o = document.getElementById('canvas_id');
				var ct = o.getContext('2d');
				//画一条线断
				ct.beginPath();		//开始路径
				ct.lineWidth=10;		//设置宽度
				ct.strokeStyle='#8000ff';	//设置颜色
				ct.moveTo(20,20);	//开始点
				ct.lineTo(100,20);	//移动方式
				ct.stroke();		//开始动作
				ct.closePath();		//结束路径
				//画一个圆
				/**
				 * arc函数（划一个圆或部份圆）
				 * p1横做标
				 * p2纵做标
				 * p3半径
				 * p4/p5角度
				 * p6 true：顺时针 false:逆时针
				 */
				ct.beginPath();		//开始路径
				ct.lineWidth=3;
				ct.strokeStyle='red';
				ct.arc(200,200,50,180,false);
				ct.stroke();
				ct.closePath();		//结束路径
				//实心圆
				ct.beginPath();
				//设置直译颜色
				ct.fillStyle='green';
				ct.arc(200,90,50,360,false);
				ct.fill();
//				ct.stroke();
				ct.closePath();
				//画一个矩形
				//矩形可以不使用开始和结束方法
				ct.beginPath();
				ct.rect(300,20,100,100);
				ct.stroke();
				ct.closePath();
				//其它方法画矩形
				ct.beginPath();
				ct.strokeRect(300,150,100,100);
				ct.stroke();
				ct.closePath();
				//实心矩形
				ct.beginPath();
				ct.rect(300,280,100,100);
				ct.fill();
				ct.fillStyle='green';
//				ct.stroke();
				ct.closePath();
				//其它方法画矩型
				ct.fillRect(300,410,100,100); //建意使用方法
				//设置文字
				ct.font="40px 黑体";
				var str = "无兄弟，不篮球。^0^"
				ct.fillText(str,450,40);	//实心字体
				ct.lineWidth=1;
				ct.strokeText(str,450,80);  //画出文字
				//把图片画到画布中
				var imgUrl = './image/pic1.jpg';
				var imgObj = new Image();
				imgObj.src = imgUrl;
				ct.drawImage(imgObj,450,100,480,720); 	//插入图片。
				
				//画一个三角形(画三角形必须要先closePath在stroke才生效)
				ct.beginPath();
				ct.moveTo(20,100);	//开始移动点
				ct.lineTo(20,150);
				ct.lineTo(60,125);
				ct.closePath();
				ct.stroke();
				//画一个实心的三角形
				ct.beginPath();
				ct.moveTo(20,200);
				ct.lineTo(20,250);
				ct.lineTo(60,225);
				ct.closePath();
				ct.fill();
				
				//旋转图片
				//设置旋转环境
				ct.save();	//保存图片
					//在异次元空间重置做标 x:0,y:0点的位置
					ct.translate(20,20);
					//形状旋转
					ct.rotate(-30*Math.PI/180);	//参数以弧度来计算，角度 0-360 公式： 角度*Math.Pi/180
					//旋转线
					ct.beginPath();
					ct.lineWidth=5;
					ct.moveTo(0,0);
					ct.lineTo(20,100);
					ct.stroke();
					ct.closePath();
				ct.restore();//还原画布
				
				//旋转小萌萌
				ct.save();
					ct.beginPath();
					ct.translate(0,0);
					ct.rotate(10*Math.PI/180);
					imgObj.src="./image/pic1.jpg";
					ct.drawImage(imgObj,450,100,480,720);
					ct.closePath();
				ct.restore();
			</script>
		</section>
	</div>
	<footer>
		<p>这是FOOTER标签</p>	
	</footer>
</body>
</html>